<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DASHBOARD</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache,no-store,must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../component/pear/css/pear-notable.css" />
		<link rel="stylesheet" href="../../admin/css/other/console1.css" />
		<link rel="stylesheet" href="/common/badge.min.css">
		<style>
			.dtree-scroll{
				/* height: calc(100vh - 5px)!important; */
				/* height: 100vh!important; */
				height: 200px!important;
				text-align: left;
				overflow: auto;
			}
			.select-date-wrapper{
				height: 100%!important;
			}
			.layui-table-body .layui-none{
				padding: 10px 15px;
			}
		</style>
	</head>
	<body class="pear-container">
		<div>

			<div class="layui-row layui-col-space10">
				
				<div class="layui-col-md8">
					<div class="layui-card top-panel">
						<div class="layui-card-body" id="layui-card1" style="height: 100%!important;">
							<table id="shift-capa-record-table" lay-filter="shift-capa-record-table"></table>
						</div>
					</div>

					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-tab custom-tab layui-tab-brief" style="position: relative;" lay-filter="docDemoTabBrief">
								<div id="echarts-records" style="background-color:#ffffff;height:400px;padding: 10px;position: relative;">
								</div>
								<div class="badge-table">
									<div class="badge-table-row1">
										<span>确认</span>
									</div>
									<div class="badge-table-row2">
										<div class="badge-wrapper">
											<div class="badge">
												<span id="badgeName"></span>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md4">
					<div class="layui-card">
						<div class="layui-card-body">
							<table id="time-record-table" lay-filter="time-record-table"></table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script src="../../lay-ext/dayjs.min.js"></script>
		
		<script>
			// 加载自定义模块,检查浏览器和token
			layui.extend({
        myheader: "{/}/lay-ext/myheader",
      });
			layui.use(['layer', 'echarts', 'element', 'count','dtree','myheader','popup','laydate','table','util'], function() {
				var $ = layui.jquery,
					layer = layui.layer,
					element = layui.element,
					count = layui.count,
					echarts = layui.echarts,
					dtree=layui.dtree,
					myheader=layui.myheader,
					popup=layui.popup, 
					laydate=layui.laydate,
					table=layui.table,
					util = layui.util;

				// 定义常量
				const baseUrl = myheader.baseUrl();

				$.ajaxSetup({
					cache:false,
					error: function () {
						layer.msg("服务器异常");
					},
				})

				// 定义默认值
				// 默认日期为今天
				var selectedDate= dayjs().format("YYYY-MM-DD")
				// var selectedDate= dayjs('2023/12/23').format("YYYY-MM-DD")
				var selectedMachineNo =layui.url().search.machineNo
			
				// $('#echarts-records').css('height',($(top.window).height()-307)+'px')

				//时间记录表 列参数
				const timeRecordCols=[
					[
						{
							title:'时间'
							,field:'recordTimeDT'
							,templet:function(d){
								let endtmp=''
								if(d.record.recordTimeEndDT!=null){
									endtmp=dayjs(d.record.recordTimeEndDT).format('HH:mm:ss')
								}
								let startUserFullName= ((d.startUser!=null)?d.startUser.userFullName:'')
								let endUserFullName= ((d.endUser!=null)?d.endUser.userFullName:'')
								return dayjs(d.record.recordTimeBeginDT).format('YYYY-MM-DD HH:mm:ss')+' ~ '+endtmp+'<br>'+'<span style="color:#485859">'+startUserFullName+','+endUserFullName+'</span>'

							},
							minWidth:50,
							// width:100,
							// style:''
							style:'font-size:8px; line-height: 20px;padding-top:1px;padding-bottom:1px'
								
						
						},
						{
							title:'作业'
							,templet:function(d){
								let tmpStr= d.record.recordName+':<br>'+d.record.recordResult
								if(d.record.recordLotInfo!=null && d.record.recordLotInfo!=''){
									tmpStr+='<br>lotNo: '+d.record.recordLotInfo
								}
								if(d.record.recordRemark!=null && d.record.recordRemark!=''){
									tmpStr+='<br>备注: '+d.record.recordRemark
								}
								return tmpStr
							}
							,style:'font-size:8px; line-height: 20px;padding-top:1px;padding-bottom:1px;word-wrap:break-word;word-break:break-all;'
							
						}
					]
				]
				
				// 产量记录表 列参数
				const shiftCapaRecordCols=[
					[
						{
							title:'时间'
							// ,field:'recordTime'
							,templet:function(d){
								// 空数据时
								if(d.shiftCapacityRecord.userCode===null && dayjs(d.shiftCapacityRecord.recordTimeDT).format('YYYY-MM-DD HH:mm:ss').includes("07:00:00") ){
									return "1值"
								}
								if(d.shiftCapacityRecord.userCode===null && dayjs(d.shiftCapacityRecord.recordTimeDT).format('YYYY-MM-DD HH:mm:ss').includes("19:00:00") ){
									return "2值"
								}
								// 有数据时
								// if(dayjs(d.recordTimeDT).format('YYYY-MM-DD HH:mm:ss').includes("20:00:00")) {
								// 	return "1值"
								// }
								// if(dayjs(d.recordTimeDT).format('YYYY-MM-DD HH:mm:ss').includes("08:00:00")) {
								// 	return "2值"
								// }

								return dayjs(d.shiftCapacityRecord.recordTimeDT).format('YYYY-MM-DD HH') + '点'
							}
							,align:'center'
							// totalRowText: '合计：'
						},
						{ 
							title:'计划产量(kpcs)'
							,field:'planOutput'
							// ,totalRow:'{{= parseInt(d.TOTAL_NUMS) }}',align:'left'
							,templet:function(d){
								if(d.shiftCapacityRecord.planOutput==null) return 0
								return d.shiftCapacityRecord.planOutput
							}
							,align:'center'

						},
						{
							title:'实际产量(kpcs)'
							,field:'actualOutput'
							,templet:function(d){
								if(d.shiftCapacityRecord.actualOutput==null) return 0
								if(parseFloat(d.shiftCapacityRecord.planOutput)>parseFloat(d.actualOutput)){
									return '<span style="color:#bf242a">'+d.shiftCapacityRecord.actualOutput+'</span>'
								}
								return parseFloat(d.shiftCapacityRecord.actualOutput)
							}
							,align:'center'
							// ,totalRow:'{{= parseInt(d.TOTAL_NUMS) }}'
						},
						{ 
							title: '不良数(pcs)'
							, field:'defect'
							// ,totalRow:'{{= parseInt(d.TOTAL_NUMS) }}'
							,templet:function(d){
								if(d.shiftCapacityRecord.defect==null) return 0
								return d.shiftCapacityRecord.defect
							}
							,align:'center'

						},
						{ title: '备注', align:'center',templet:function(d){
							if(d.shiftCapacityRecord.recordRemark==null) return '';
							return d.shiftCapacityRecord.recordRemark
						}},
						{
							title: '作业者'
							,align:'center'
							,templet:function(d){
								if(d.user===null){
									// if(dayjs().hour()>8 &&dayjs().hour()<20 && dayjs(d.recordTimeDT).hour()==20){
									// 	return '<span style="color:#bed3ca">未到时间</span>'
									// }
									return '<span style="color:#ee827c">未入力</span>'
								}
								return d.user.userFullName
							}
						}
					]
				]

				// 渲染产量记录表 函数
				function renderCapaTable(selectedMachineNo,selectedDate){
					table.render({
						elem:"#shift-capa-record-table",
						cols:shiftCapaRecordCols,
						url: baseUrl + "/shiftcaparecord/getDailyData4Dashboard",
						where: {
							machineNo: selectedMachineNo,
							dailyStart: dayjs(new Date(selectedDate+' 07:00:00')).format('YYYY-MM-DD HH:mm:ss'),
							dailyEnd:dayjs(new Date(selectedDate+' 07:00:00')).add(1,'day').format('YYYY-MM-DD HH:mm:ss')
							
						},
						response: {
							// 重新设定返回的数据格式
							statusCode: 200, //默认返回 code:0 为返回成功,改成200
							countName: "total", //默认数组总量字段是count,改成total
						},
						// skin: "line",
						lineStyle:"height:auto",
						// 分页
						page:false,
						// 合计行
						// totalRow:true
					})
					table.resize('shift-capa-record-table')

				}
				// 渲染产量图 函数
				function renderCapaChart(selectedMachineNo,selectedDate){
					$.ajax(baseUrl+'/shiftcaparecord/getDailyData4Chart',{
						type: "get",
        		timeout: 10000,
						data:{
							selectedMachineNo:selectedMachineNo,
							selectedDate:selectedDate
						},
						success:function(res){
							if(res.code!=200) return
							if(res.data.actualOutputList.length===res.data.planOutputList.length){
								for(let ii=0;ii<res.data.actualOutputList.length;ii++){
									res.data.actualOutputList[ii]={
										value:res.data.actualOutputList[ii]
									}
									res.data.planOutputList[ii]={
										value: res.data.planOutputList[ii]
									}
									
									// console.log(res.data.planOutputList[ii]);
									// console.log(res.data.actualOutputList[ii]);
									// console.log(res.data.actualOutputList.length);
									if(ii==0){continue}
									if(res.data.actualOutputList[ii].value!=0){

										if((res.data.actualOutputList[ii].value-res.data.actualOutputList[ii-1].value)<(res.data.planOutputList[ii].value-res.data.planOutputList[ii-1].value)){
											// res.data.actualOutputList[ii]={
											// 	value:res.data.actualOutputList[ii],
											// 	itemStyle:{
											// 		color:'#d0576b'
											// 	}
											// }
											if(res.data.actualOutputList[ii].value<res.data.planOutputList[ii].value){
												res.data.actualOutputList[ii].itemStyle={
													color:'#d0576b'
												}
											}
										}
										if(res.data.actualOutputList[ii-1].value==0){
											if(res.data.actualOutputList[ii].value < res.data.planOutputList[ii].value){
												res.data.actualOutputList[ii].itemStyle={
													color:'#d0576b'
												}
											}
										}
									}

									// if((res.data.actualOutputList[ii]<res.data.planOutputList[ii])&& res.data.actualOutputList[ii]!=0){
									// 	res.data.actualOutputList[ii]={
									// 		value:res.data.actualOutputList[ii],
									// 		itemStyle:{
									// 			color:'#d0576b'
									// 		}
									// 	}
									// }
								}
							}
							// console.log(res.data.actualOutputList);
							myChart.setOption({
								title: {
									text: selectedDate+' '+ selectedMachineNo+' 产量'
								},
								series:[
									{
										name: '计划产量',
										type: 'line',
										data: res.data.planOutputList
									},
									{
										name: '实际产量',
										type: 'bar',
										// 设置单个柱子的样式
										itemStyle: {
											color: '#91cc75',
											shadowColor: '#91cc75',
											borderType: 'dashed',
											opacity: 0.7
										},
										data: res.data.actualOutputList
									}
								]
							})
						},
						complete:function(){
							myChart.hideLoading();
						}

					})
				}
				// 渲染时间记录表 函数
				// 完成后自动渲染产量图
				function renderTimeTable(selectedMachineNo,selectedDate){
					table.render({
						elem:'#time-record-table',
						cols:timeRecordCols,
						url:baseUrl + "/record/getDailyData4Console",
						where: {
							machineNo: selectedMachineNo,
							dailyStart: dayjs(selectedDate+' 07:00:00').format('YYYY-MM-DD HH:mm:ss'),
							dailyEnd:dayjs(selectedDate+' 07:00:00').add(1,'day').format('YYYY-MM-DD HH:mm:ss')
						},
						headers: {
							//请求头
							satoken: layui.sessionData("mytoken").tokenValue,
						},
						response: {
							// 重新设定返回的数据格式
							statusCode: 200, //默认返回 code:0 为返回成功,改成200
							countName: "total", //默认数组总量字段是count,改成total
						},
						// skin: "row",
						lineStyle:"height:auto;",
						// 分页
						page:false,
						done:function(){
							setTimeout(function(){
								$('#echarts-records').css('height',($(top.window).height()-($("#layui-card1").height()+100))+'px')
								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);

								myChart.showLoading();
								renderCapaChart(selectedMachineNo,selectedDate);
								myChart.resize()
							},500)
						}
					})
					table.resize('time-record-table')

				}

				//#region 
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('echarts-records'));
				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '日期'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['计划产量','实际产量']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						// boundaryGap: false,
						data: ['7点','9点','11点','13点','15点','17点','19点','21点','23点','1点','3点','5点','7点']
					},
					yAxis: {
						type: 'value',
						name: 'kpcs',
					},
					series: [
						{
							name: '计划产量',
							type: 'line',
							data: [0,0,0,0,0,0,0,0,0,0,0,0,0]
						},
						{
							name: '实际产量',
							type: 'bar',
							// 设置单个柱子的样式
							itemStyle: {
								color: '#91cc75',
								shadowColor: '#91cc75',
								borderType: 'dashed',
								opacity: 0.7
							},
							data: [0,0,0,0,0,0,0,0,0,0,0,0,0]
						}
					]
				};

			// 使用刚指定的配置项和数据显示图表。
      // myChart.setOption(option);

			// 浏览器尺寸变更监听函数
			top.window.addEventListener('resize', function() {
				table.resize('time-record-table')
				table.resize('shift-capa-record-table')
				$('#echarts-records').css('height',($(top.window).height()-($("#layui-card1").height()+100))+'px')
				myChart.resize();
				setTimeout(() => {
					$('.badge-table').css('left',($('.custom-tab').width()-80)+'px')			
				}, 1000);
			});
			//#endregion
     
			// 渲染结果 函数
			function renderResult(selectedMachineNo,selectedDate){
				//1.获取数据,渲染echart
				// myChart.showLoading();
				// renderCapaChart(selectedMachineNo,selectedDate);
				//2.获取数据,渲染table
				renderTimeTable(selectedMachineNo,selectedDate)
				//3.获取数据,渲染每值产量
				renderCapaTable(selectedMachineNo,selectedDate)
				table.resize('time-record-table')
				table.resize('shift-capa-record-table')
				$('#echarts-records').css('height',($(top.window).height()-($("#layui-card1").height()+100))+'px')
				myChart.resize();
				setTimeout(() => {
						badgeHandle()
				}, 1000);
			}
			
			$('.badge-table').css('left',($('.custom-tab').width()-80)+'px')

			renderResult(selectedMachineNo,selectedDate);
			
			//#region 盖章的部分
			function badgeHandle(){
				$('.badge-table').css('left',($('.custom-tab').width()-80)+'px')
				// 设置图章文字
				$('#badgeName').text('')
				// 去除图章样式
				$('.badge-wrapper').css('border','none') 
				if(selectedMachineNo=='' || selectedDate=='') return 
				$.ajax(baseUrl+'/dailyConfirm/getDailyConfirm',{
					type:'get',
					contentType:'application/json;charset=utf-8',
					data:{
						"machineNo":selectedMachineNo,
						"recordTimeDT":selectedDate
					},
					success:function(res){
						// 修改绝对定位的 left 位置
						if(res.code!=200){
							layer.msg(res.msg||res.message||'未获取有效数据')
						}else{
							if(res.data===null ){
								// 设置图章文字
								$('#badgeName').text('')
								// 去除图章样式
								$('.badge-wrapper').css('border','none') 
							} else {
								// 设置图章文字
								$('#badgeName').text(res.data.user.userFullName)
								// 新增图章样式
								$('.badge-wrapper').css('border','1px solid #ff0000') 
							}
						}
					}
				})
			}

			//#endregion

			//#region 固定条,悬浮按钮
			util.fixbar({
				bars:[
					{
						type: 'left',
						icon:'layui-icon-left'
					},{
						type:'today',
						content:'今'
					},{
						type: 'right',
						icon:'layui-icon-right'
					}
				],
				click:function(type){
					if(type=='left'){
						selectedDate=dayjs(selectedDate).subtract(1,'day').format("YYYY-MM-DD")
					}else if(type=='today'){
						selectedDate= dayjs().format("YYYY-MM-DD")
					}else if(type='right'){
						selectedDate=dayjs(selectedDate).add(1,'day').format("YYYY-MM-DD")
						if(dayjs().isBefore(dayjs(selectedDate))){
							selectedDate=dayjs().format("YYYY-MM-DD")
						}
					}
					if(selectedDate!=''	 && selectedMachineNo!=''){
							renderResult(selectedMachineNo,selectedDate);
					}
				}
			})
			//#endregion


			//#region 循环数据
			window.setInterval(function(){
				if(dayjs().hour()>=7)	selectedDate= dayjs().format("YYYY-MM-DD")
				if(selectedDate!=''	 && selectedMachineNo!=''){
					renderResult(selectedMachineNo,selectedDate);
				}
			},60000*3)
			//#endregion


		});
		</script>
	</body>
</html>
